<template>
	<view class="main">
		<v-searchBox @searchBoxEvent="currentSearchBoxEvent" placeholderText="请输入您要查找的课程" v-show="isShowSearchBox"></v-searchBox>
		<!-- 科目列表 -->
		<v-nav class="naver" :subject_list="subject_list" @ckSubject="ckSubject" :class="isShowSearchBox? 'mtNaver': ''"></v-nav>
		
		<view class="content-main">
			<!-- 筛选列表 -->
			<v-filter-bar ref="filterbar" @ck='ck' @selectTime='selectTime' @sureSubmit='sureSubmit'></v-filter-bar>
			<!-- 数据列表 -->
			<view class="lesson-warp" @click="hideAll" v-for="(card, idx) in subject_card_list" :key="idx">
				<view class="item">
					<v-competitive-summary mclass="lesson-card" :item="card">
					</v-competitive-summary>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import searchBox from "@/components/search-box/serach-box"
	import competitiveSummary from './components/competitive-summary';
	import filters from './components/filter-bar.vue';
	import nav from './components/nav';
	import utils from '@/common/util.js'
	export default {
		components: {
			vNav: nav,
			vCompetitiveSummary: competitiveSummary,
			vFilterBar: filters,
			vSearchBox: searchBox
		},
		data() {
			return {
				subject_list: uni.getStorageSync('zbSubjectArr'),
				subject_obj: {},  // 以对象方式来存储科目ID 和 值
				subject_id: 1, // 科目ID
				kind_id: 1, // 班类型
				page: 1, // 页数
				isMore: false, // 底部加载条件
				isNoMore: false, // 没有更多数据的条件
				date: '', // 日期
				subject_card_list: [],
				season_tag: '', // 季节
				level_tag: '', // 标签
				order: 0, // 排序
				userInput: '',
				isShowSearchBox: false
			}
		},
		onReachBottom() {
			if (this.isNoMore) return
			uni.showLoading({
				title: '正在加载中...'
			})
			this.isMore = true
			setTimeout(() => {
				var reqObj = {
					kind_id: this.kind_id,
					date: this.date,
					order: this.order,
					limit: 10,
					page: ++this.page
				}
				if (this.userInput != '') {
					reqObj.search_name = this.userInput
				}
				this.getData(`stu/course/infos/${this.subject_id}`, reqObj, 'getCourseList') 
			}, 500)
		},
		onNavigationBarButtonTap(e) {
			this.isShowSearchBox = !this.isShowSearchBox
			var reqObj = {
				kind_id: this.kind_id ,// 类型
				date: this.date,
				order: this.order,
				limit: 10
			}
			if (this.userInput != '' && !this.isShowSearchBox) {
				this.page = 1
				reqObj.search_name = this.userInput
				this.getData(`stu/course/infos/${this.subject_id}`,reqObj,'getCourseList')
			} else if (this.userInput == '' && !this.isShowSearchBox) {
				this.getData(`stu/course/infos/${this.subject_id}`,reqObj,'getCourseList')
			}
		},
		
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: e.title
			})
			this.kind_id = e.kind
			if (this.kind_id == 2) {
				this.season_tag = e.season_tag
				this.level_tag = e.level_tag
			}
			
			// 默认获取语文
			this.getData(`stu/course/infos/${1}`, {
				kind_id: this.kind_id
			}, 'getCourseList')
		},
		methods: {
			/* 搜索课程名称 */
			currentSearchBoxEvent(e) {
				if(e == undefined) {
					this.userInput = '';
				} else {
					this.userInput = e.detail.value
				}
			},
			/**
			 * @param {String} url 接口地址
			 * @param {Object} params 请求参数，以请求体的形式进行存放
			 * @param {Array} query 请求参数，以数组的形式进行存放，并进行拼接到url地址中如：baidu/xx1/xx2
			 * @param {mark} mark 请求标识，来操作不同的数据结果
			 */
			getData(url, params = {}, mark = '') {
				// 判断是否是常规班
				if (this.kind_id == 2) {
					params.season_tag = this.season_tag
					params.level_tag = this.level_tag
				}
				this.$zbapi.apiPost(url, params).then(res => {
					uni.hideLoading()
					if (res.data.code == 0 && res.data.data.list.length > 0) {
						switch(mark) {
							case 'getCourseList':
								let zbSubject = uni.getStorageSync('zbSubject')
								res.data.data.list.forEach((item,index) => {
									item.start_month = utils.getAllTime(item.teach_start_day).substr(0, 4).replace(/-/g, '.')
									item.end_month = utils.getAllTime(item.teach_end_day).substr(0, 4).replace(/-/g, '.')
									item.subject_name = zbSubject[item.subject_id]
									// 头像，最多取 4 个
									item.figureimgsList = !item.figureimgs ? [] : item.figureimgs.split(',').slice(0, 4)
									let now = parseInt(Date.now() / 1000) 
									let enrol = parseInt((item.enrol_end_time - now) / 86400) // 获取截止日期
									if (enrol == 0 && (item.enrol_end_time - now) > 0) {
										item.enrol_end_time = 1
									} else {
										item.enrol_end_time = enrol
									}
								})
								
								if (this.isMore) {
									this.subject_card_list = this.subject_card_list.concat(res.data.data.list)
								} else {
									this.subject_card_list = res.data.data.list
								}
							break;
						} 
					} else {
						if (!this.isMore) this.subject_card_list = []
						if (this.isMore) this.isNoMore = true
						uni.showToast({
							title: '无更多数据~',
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '服务器出错啦~',
						icon: 'none'
					})
				})
			},
			
			// 科目选择
			ckSubject(subject_id) {
				if (this.subject_id === subject_id) return
				this.subject_id = subject_id
				this.closeState()
				// 更新
				this.getData(`stu/course/infos/${subject_id}`, {
					kind_id: this.kind_id ,// 类型
					date: this.date,
					order: this.order,
				}, 'getCourseList')
			},
			
			// 时间的筛选
			selectTime(item) {
				if (JSON.stringify(item) === '{}') {
					this.closeState()
					// 更新
					this.getData(`stu/course/infos/${this.subject_id}`, {
						kind_id: this.kind_id ,// 类型
						order: this.order,
					}, 'getCourseList')
					this.date = ''
					this.hideAll()
					return
				}
				this.date = item.time
			},
			
			// 确定选择时间
			sureSubmit() {
				this.closeState()
				// 更新
				this.getData(`stu/course/infos/${this.subject_id}`, {
					kind_id: this.kind_id ,// 类型
					date: this.date,
					order: this.order
				}, 'getCourseList')
				this.hideAll()
			},
			
			// 排序选择
			ck(index) {
				this.order = index
				this.closeState()
				// 更新
				this.getData(`stu/course/infos/${this.subject_id}`, {
					kind_id: this.kind_id ,// 类型
					date: this.date,
					order: this.order
				}, 'getCourseList')
				this.hideAll()
			},
			
			// 取消状态
			closeState() {
				this.isMore = false
				this.isNoMore = false
				this.page = 1
			},
			// 隐藏筛选弹窗
			hideAll(){
				this.$refs.filterbar.hideAll()
			},
		}
	}
</script>

<style>
page{background: #F7F7F7;}

.lesson-warp{padding: 0 40upx;}
.lesson-warp .item{margin-bottom: 20upx; width:100%;}
.item .lesson-card{background: #FFF !important; border-radius: 20upx;}

.content-main{position: relative;}
.mtNaver {margin-top: 100upx;}
.search_cont{
	position: fixed;
	top: 0;
	z-index: 999;
}
</style>
